<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试页面</title>
    <link rel="stylesheet" href="./static/css/index.css">
</head>

<body>
    <div id="app">
        <h1 v-text="message"></h1>

        <table>
            <thead>
                <tr>
                    <th>编号</th>
                    <th>用户名</th>
                    <th>昵称</th>
                    <th>密码</th>
                    <th>状态</th>
                </tr>
            </thead>

            <tbody>
                <tr v-for="u in users" ::key="u.id">
                    <td v-text="u.id"></td>
                    <td v-text="u.username"></td>
                    <td v-text="u.nickname"></td>
                    <td v-text="u.password"></td>
                    <td v-text="u.status"></td>
                </tr>
            </tbody>
        </table>
    </div>

</body>
<script src="./static/lib/vue.min.js"></script>
<script src="./static/lib/axios.min.js"></script>

<script>
    var vue = new Vue({
        el: "#app",
        data: {
            message: "你好啊",
            users: []
        },
        mounted() {
            this.loadData();
        },
        methods: {
            loadData() {
                axios.get("http://192.168.56.104:8080/api/user")
                    .then(response => {
                        this.users = response.data;
                    });
            }
        },
    });

</script>

</html>